import React, { useState, useEffect, useContext } from 'react'
import { Table, Tooltip } from 'antd'
import Container from '@/appComponents/Container'
import { useTableData } from '&/hooks'
import { getEmergencyMeasure } from '&/api/electricity'
import Filter from './Filter'
import { LayoutContext } from '@/pages/layouts/context'

const defaultColumns = [
  {
    title: '序号',
    width: 50,
    render: (_, __, index) => `${index + 1}`,
    align: 'center'
  },
  {
    width: 280,
    title: '企业名称',
    dataIndex: 'ent_name',
    key: 'ent_name',
    align: 'center',
    ellipsis: {
      showTitle: false
    },
    render: (text) => {
      return (
        <Tooltip placement="topLeft" title={text}>
          {text}
        </Tooltip>
      )
    }
  },
  {
    title: '所属区',
    dataIndex: 'county_name',
    key: 'county_name',
    align: 'center'
  },
  {
    title: '所属街乡',
    dataIndex: 'town_name',
    key: 'town_name',
    align: 'center'
  },
  {
    title: '所属行业',
    dataIndex: 'industry_type',
    key: 'industry_type',
    align: 'center'
  },
  {
    title: '保障期应急预案01（原始）',
    dataIndex: 'measure_old',
    key: 'measure_old',
    align: 'center',
    width: 400,
    ellipsis: {
      showTitle: false
    },
    render: (text) => {
      return (
        <Tooltip placement="topLeft" title={text}>
          {text}
        </Tooltip>
      )
    }
  },
  {
    title: '保障期应急预案01（格式化）',
    dataIndex: 'measure',
    key: 'measure',
    align: 'center',
    width: 400,
    ellipsis: {
      showTitle: false
    },
    render: (text) => {
      return (
        <Tooltip placement="topLeft" title={text}>
          {text}
        </Tooltip>
      )
    }
  }
]

const EmergentMeausere = ({listParam}) => {
  
  const [columns, setColumns] = useState(defaultColumns)
  const [loading, setLoading] = useState()
  const [dataSource, setDataSource] = useState()
  const [pageInfo, setPageInfo] = useState({})
  const [paramsData, setParamsData] = useState({
    county_id: -1, //区
    industry_type_id: -1, //行业
  })
  const {activePlan} = useContext(LayoutContext)

  useEffect(() => {
    getParams()
  }, [activePlan, listParam])

  function getParams(pageParam={}) {
    setLoading(true)
    let county_id = paramsData.county_id
    let industry_type_id = paramsData.industry_type_id
    county_id == -1 && (county_id = '')
    industry_type_id == -1 && (industry_type_id = '')
    const p = {
      ...paramsData,
      county_id,
      industry_type_id,
      ...pageParam
    }
    listParam.plan_id && (p.plan_id = activePlan.plan_id)
    listParam.control_type && (p.control_type = listParam.control_type)
    getEmergencyMeasure(p).then(res => {
      setLoading(false)
      let pages = res.page_info ? {
        current: res.page_info.page,
        pageSize: res.page_info.page_size,
        total: res.page_info.total_number,
      } : {}
      setPageInfo(pages)
      let datas = res.data ? res.data.map((item,idx) => {
        return {
          key: idx,
          ...item
        }
      }) : []
      setDataSource(datas)
    })
  }

  return (
    <Container>
      <Container.ContainerQuery title="查询条件">
        <Filter
          listParam={listParam}
          onQuery={() => {getParams({page: pageInfo.current})}}
          paramsData={paramsData}
          setParamsData={setParamsData}
        />
      </Container.ContainerQuery>
      <Container.ContainerContent>
        <Table 
          columns={columns}
          loading={loading}
          style={{height: '100%'}}
          dataSource={dataSource}
          size="small"
          pagination={{
            ...pageInfo,
            defaultPageSize: 20,
            position: ['bottomCenter'],
            showSizeChanger: false,
            onChange: (page) => {
              getParams({page})
            },
            showTotal: (total, range) => {
              return `当前页面总计${range[1] - range[0] + 1}家企业，当前查询条件总计${total}家企业`
            }
          }}
          scroll={{
            y: '70vh'
          }}
        />
      </Container.ContainerContent>
    </Container>
  )
}

export default EmergentMeausere
